<template>
	<view>
		<!-- 返回主页按钮 -->
		<view class="back-home-btn" @click="backToHome">
			<u-icon name="home" color="#ffffff" size="40"></u-icon>
		</view>
		
		<view class="w-750 h-500 position-retive">
			<image src="https://www.shuyunpt.com/app/image/login/1.png" mode="widthFix" class="w-750 h-500"></image>
			<view class="position-absolute left-0 right-0 top-105">
				<view class="d-flex">
					<image src="https://www.shuyunpt.com/app/image//login/2.png" class="w-380 h-280"></image>
					<view class="bgc-white title-style m-t-210">墅云城乡建设大平台</view>
				</view>
				<view class="bgc-white box p-t-80">
					<view class="bgc-F2F4F6 w-630 h-100 br-60 m-l-60 d-flex-items-center">
						<image src="https://www.shuyunpt.com/app/image/login/3.png" class="w-32 h-32 m-l-40 m-r-20"></image>
						<input type="number" placeholder="输入手机号" class="w-500" v-model="mobile">
					</view>
					<view class="bgc-F2F4F6 w-630 h-100 br-60 m-l-60 d-flex-items-center m-t-40" >
						<image src="https://www.shuyunpt.com/app/image/login/4.png" class="w-32 h-32 m-l-40 m-r-20"></image>
						<input type="text" placeholder="请输入验证码" class="w-300" v-model="code">
						<view class="getCode" @click="getCode">{{textCode}}</view>
					</view>
					<image src="https://www.shuyunpt.com/app/image/login/5.png" class="w-630 h-100 m-l-60 m-t-72" @click="login"></image>
				</view>
			</view>
			<!-- 微信小程序手机号快捷登录按钮 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="quick-login-section">
				<button 
					class="quick-login-btn" 
					open-type="getPhoneNumber" 
					@getphonenumber="getPhoneNumber" 
				>
					<view class="btn-content">
						<text class="btn-text">手机号快捷登录</text>
					</view>
					<view class="btn-shine"></view>
				</button>
			</view>
			<!-- #endif -->
			
			<view class="position-fixed left-0 right-0 bottom-120">
				<!-- #ifdef APP-PLUS -->
					<view class="d-flex-items-center d-flex-center">
						<view class="bgc-D9D9D9 w-220 h-2"></view>
						<text class="c-D9D9D9 m-l-15 m-r-15"> 其他登录方式 </text>
						<view class="bgc-D9D9D9 w-220 h-2"></view>
					</view>
					<view class="d-flex-center m-t-30">
						<!-- 微信授权登录按钮 -->
						<button 
							class="wechat-login-btn" 
							open-type="getPhoneNumber" 
							@getphonenumber="getPhoneNumber"
							:disabled="!agree"
						>
							<image src="https://www.shuyunpt.com/app/image/login/6.png" class="w-80 h-80"></image>
						</button>
					</view>
				<!-- #endif -->
				<view class="align-center m-t-40 d-flex-items-center d-flex-center" @click="agree = !agree">
					<u-icon name="checkmark-circle-fill" :color="agree ? '#5C65FF' : '#999999'" size="34" class="m-r-10"></u-icon>
					阅读并同意<text class="c-5C65FF" @click.stop="$jump.navigateTo('/pages/login/agree?title=用户协议')">《用户协议》</text>和<text class="c-5C65FF" @click.stop="$jump.navigateTo('/pages/login/agree?title=隐私协议')">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		getWechatCode, 
		handleWechatPhoneAuth, 
		wechatLoginFlow, 
		validateWechatAuthData 
	} from '@/utils/wechat-auth.js';
	import { wechatLogin } from '@/utils/service/wechat-api.js';
	
	export default{
		data(){
			return{
				mobile:"",
				code:"",
				timer:null,
				textCode:'获取验证码',
				agree:false,
				// 微信授权相关数据
				wechatCode: '',
				wechatPhoneData: {
					iv: '',
					encryptedData: ''
				},
				// 平台来源
				platform: '',
				// 来源页面信息
				sourcePage: {
					url: '',
					params: {}
				}
			}
		},
		onLoad(options) {
			// 获取当前平台信息
			this.getPlatformInfo();
			
			// 记录来源页面
			this.recordSourcePage(options);
		},
		methods:{
			// 获取平台信息
			getPlatformInfo() {
				// #ifdef APP-PLUS
				this.platform = 'app';
				// #endif
				
				// #ifdef MP-WEIXIN
				this.platform = '微信小程序';
				// #endif
				
				// #ifdef H5
				this.platform = 'h5';
				// #endif
				
				console.log('当前平台:', this.platform);
			},
			
			// 记录来源页面
			recordSourcePage(options) {
				// 获取来源页面信息
				if (options.source_url) {
					this.sourcePage.url = decodeURIComponent(options.source_url);
				}
				if (options.source_params) {
					try {
						this.sourcePage.params = JSON.parse(decodeURIComponent(options.source_params));
					} catch (e) {
						console.log('解析来源参数失败:', e);
					}
				}
				
				console.log('来源页面:', this.sourcePage);
			},
			// 取消登录
			cancelLogin() {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				});
			},
			async getCode(){
				let time = 60
				if(this.textCode != '获取验证码'){
					return
				}
				if(!this.$verify.verifyPhone(this.mobile)) return this.$hint.desc('请输入正确手机号')
				const res = await this.$service({
					url:"/api/common/sendSms",
					data:{
						mobile:this.mobile,
						event:'login'
					}
				})
				console.log(res)
				this.$hint.desc(res.msg)
				if(res.code == 1){
					this.timer = setInterval(()=>{
						time -- 
						this.textCode = time + 'S'
						if(time <= 0){
							clearInterval(this.timer)
							this.textCode = '获取验证码'
						}
					},1000)
				}
			},
			async login(){
				if(!this.agree) return this.$hint.desc('请阅读并同意《用户协议》和《隐私协议》')
				if(!this.$verify.verifyPhone(this.mobile)) return 
				if(this.code.length != 6) return  this.$hint.desc('请输入六位验证码')
				const res = await this.$service({
					url:"/api/member.login/mobileLogin",
					data:{
						mobile:this.mobile,
						captcha:this.code,
						source: this.platform // 添加来源字段
					}
				})
				console.log(res)
				this.$hint.desc(res.msg)
				if(res.code == 1){
					this.$store.commit('getUserInfo',res.data.userinfo)
					setTimeout(()=>{
						this.redirectAfterLogin();
					},2000)
					
				}
			},
			// 获取微信手机号授权
			async getPhoneNumber(e) {
				if (!this.agree) {
					this.$hint.desc('请阅读并同意《用户协议》和《隐私协议》');
					return;
				}
				
				try {
					// 处理微信手机号授权
					const phoneData = await handleWechatPhoneAuth(e);
					this.wechatPhoneData = phoneData;
					
					// 执行微信登录流程
					const loginData = await wechatLoginFlow(phoneData);
					
					// 验证登录数据
					if (!validateWechatAuthData(loginData)) {
						this.$hint.desc('微信授权数据不完整');
						return;
					}
					const res = await this.$service({
						url:"/api/member.login/wxlogin",
						data:{
							wx_code:loginData.code,
							iv:loginData.iv,
							encryptedData:loginData.encryptedData,
							source: this.platform // 添加来源字段
						}
					})
					console.log(res)
					this.$hint.desc(res.msg)
					if(res.code == 1){
						this.$store.commit('getUserInfo',res.data.userinfo)
						setTimeout(()=>{
							this.redirectAfterLogin();
						},2000)
						
					}
					
				} catch (error) {
					console.error('微信授权失败:', error);
					if (error.message === '用户拒绝授权手机号') {
						this.$hint.desc('需要授权手机号才能登录');
					} else {
						this.$hint.desc('微信授权失败，请重试');
					}
				}
			},
			// 返回主页
			backToHome() {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				});
			},
			
			// 登录成功后跳转
			redirectAfterLogin() {
				// 如果有来源页面，则跳回来源页面
				if (this.sourcePage.url) {
					try {
						// 构建跳转URL
						let redirectUrl = this.sourcePage.url;
						
						// 如果有参数，添加到URL中
						if (Object.keys(this.sourcePage.params).length > 0) {
							const params = new URLSearchParams();
							Object.keys(this.sourcePage.params).forEach(key => {
								params.append(key, this.sourcePage.params[key]);
							});
							redirectUrl += '?' + params.toString();
						}
						
						console.log('跳转回来源页面:', redirectUrl);
						
						// 判断是否为tabbar页面
						if (this.isTabbarPage(redirectUrl)) {
							uni.switchTab({
								url: redirectUrl
							});
						} else {
							if(redirectUrl == '/pages/login/index')
							{
								uni.switchTab({
									url: '/pages/tabbar/index/index'
								});
							}
							uni.navigateTo({
								url: redirectUrl
							});
						}
					} catch (error) {
						console.error('跳转失败:', error);
						// 跳转失败时默认跳转到首页
						uni.switchTab({
							url: '/pages/tabbar/index/index'
						});
					}
				} else {
					// 没有来源页面时跳转到首页
					uni.switchTab({
						url: '/pages/tabbar/index/index'
					});
				}
			},
			
			// 判断是否为tabbar页面
			isTabbarPage(url) {
				const tabbarPages = [
					'/pages/tabbar/index/index',
					'/pages/tabbar/class/index',
					'/pages/tabbar/order/index',
					'/pages/tabbar/my/index'
				];
				return tabbarPages.some(page => url.includes(page));
			}
		}
	}
</script>

<style>
	page{background:#fff;}
</style>
<style scoped>
	/* 返回主页按钮样式 */
	.back-home-btn {
		position: fixed;
		top: 60rpx;
		left: 40rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
	}
	
	.back-home-btn:active {
		transform: scale(0.9);
		background: rgba(0, 0, 0, 0.5);
	}
	
	/* 取消登录区域样式 */
	.cancel-login-section {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 280rpx; /* 底部区域上方30px (80rpx + 200rpx) */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		padding: 0 40rpx;
	}
	
	/* 添加装饰性分隔线 */
	.cancel-login-section::before {
		content: '';
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 4rpx;
		background: linear-gradient(90deg, transparent, #e0e6ed, transparent);
		border-radius: 2rpx;
	}
	
	.cancel-login-btn {
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border: 2rpx solid #e0e6ed;
		color: #666666;
		font-size: 30rpx;
		font-weight: 500;
		padding: 24rpx 80rpx;
		border-radius: 60rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.cancel-login-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: left 0.5s;
	}
	
	.cancel-login-btn:active {
		transform: scale(0.96);
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
		border-color: #d1d5db;
	}
	
	.cancel-login-btn:active::before {
		left: 100%;
	}
	
	/* 按钮内部元素样式 */
	.btn-icon {
		margin-right: 12rpx;
	}
	
	.btn-text {
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	
	.title-style{
		width: 340rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 4rpx;
		
		
		font-weight: bold;
		font-size: 32rpx;
		line-height: 52rpx;
		text-align: center;
		color: #5E6CFF;
	}
	.box{
		border-radius: 60rpx 60rpx 0rpx 0rpx;
	}
	.bgc-F2F4F6{
		background: #F2F4F6;
	}
	.getCode{
		width: 188rpx;
		height: 68rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		border: 2rpx solid #5C65FF;
		color:#5C65FF;
		line-height: 68rpx;
		text-align: center;
	}
	.c-5C65FF{
		color:#5C65FF;
	}
	.bgc-D9D9D9{
		background:#D9D9D9
	}
	.c-D9D9D9{
		color:#D9D9D9;
	}
	/* 微信登录按钮样式 */
	.wechat-login-btn {
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.wechat-login-btn::after {
		border: none;
	}
	
	.wechat-login-btn[disabled] {
		opacity: 0.5;
	}
	
	/* 微信手机号快捷登录按钮样式 */
	.quick-login-section {
		position: fixed;
		left: 0;
		right: 0;
		bottom:600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		padding: 0 40rpx;
	}
	
	.quick-login-btn {
		width: 100%;
		max-width: 630rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #07C160 0%, #00B050 100%);
		border: none;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
		position: relative;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.quick-login-btn::after {
		border: none;
	}
	
	.quick-login-btn:active {
		transform: scale(0.96);
		box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.4);
	}
	
	.quick-login-btn[disabled] {
		background: linear-gradient(135deg, #cccccc 0%, #bbbbbb 100%);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		opacity: 0.6;
	}
	
	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}
	
	.btn-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		padding: 8rpx;
	}
	
	.btn-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
		letter-spacing: 2rpx;
	}
	
	.btn-shine {
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.6s ease;
		z-index: 1;
	}
	
	.quick-login-btn:active .btn-shine {
		left: 100%;
	}
	
	/* 添加呼吸灯效果 */
	@keyframes breathe {
		0%, 100% {
			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
		}
		50% {
			box-shadow: 0 8rpx 32rpx rgba(7, 193, 96, 0.5);
		}
	}
	
	.quick-login-btn:not([disabled]) {
		animation: breathe 2s ease-in-out infinite;
	}
</style>